<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container>
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">      
        <a-row>
          <h3 class="title">基本信息</h3>
          <a-col :span="12">
            <a-form-model-item label="结算组织" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <span class="ant-form-text">{{model.name}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="来源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="source_dictText">
              <span class="ant-form-text">{{model.source_dictText}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="管理用户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="users">
              <span class="ant-form-text">{{model.users}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="仓库发货状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ecStatus_dictText">
              <span class="ant-form-text">{{model.ecStatus_dictText}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="易仓账号状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ecUserStatus_dictText">
              <span class="ant-form-text">{{model.ecUserStatus_dictText}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="认证情况" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="authStatus_dictText">
              <span class="ant-form-text">{{model.authStatus_dictText}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-if="model.authStatus=='3'">
            <a-form-model-item label="驳回原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="refuseReason">
              <span class="ant-form-text">{{model.refuseReason}}</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-row>
          <h3 class="title">资金信息</h3>
          <a-col :span="12">
            <a-form-model-item label="账户余额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="balance">
              <span class="ant-form-text">{{model.balance}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="实际余额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realBalance">
              <span class="ant-form-text">{{model.realBalance}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="临时额度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="temporaryBalance">
              <span class="ant-form-text">{{model.temporaryBalance}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="7天平均费用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="weekAverageAmount">
              <span class="ant-form-text">{{model.weekAverageAmount}}</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-row>
          <h3 class="title">配置信息</h3>
          <a-col :span="12">
            <a-form-model-item label="技术服务费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="technicalProption">
              <span class="ant-form-text">{{model.technicalProption}}</span>
            </a-form-model-item>
          </a-col>
         <a-col :span="12">
            <a-form-model-item label="包材费(一票多件)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packageFee">
              <span class="ant-form-text">{{model.packageFee}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="操作费(固定)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operateFee">
              <span class="ant-form-text">{{model.operateFee}}</span>
            </a-form-model-item>
          </a-col> 
          <a-col :span="12">
            <a-form-model-item label="操作费(基础)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operateBaseFee">
              <span class="ant-form-text">{{model.operateBaseFee}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="操作费(续件)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operateRenewalFee">
              <span class="ant-form-text">{{model.operateRenewalFee}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="临时额度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <span class="ant-form-text">{{model.izOpenTemporary=='0'?'关':'开'}}</span>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="临时额度是否循环" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <span class="ant-form-text">{{model.izCycleTemporary_dictText}}</span>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="beginTime">
              <span class="ant-form-text">{{model.beginTime}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="临时额度天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="temporaryDayNum">
              <span class="ant-form-text">{{model.temporaryDayNum?model.temporaryDayNum:0}} 天</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-row>
          <h3 class="title">客户信息</h3>
           <!-- <a-col :span="12">
            <a-form-model-item label="认证类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="authType">
               <span class="ant-form-text">{{model.authType_dictText}}</span>        
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="12">
            <a-form-model-item label="组织名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <span class="ant-form-text">{{model.name}}</span>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item label="ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <span class="ant-form-text">{{model.id}}</span>
            </a-form-model-item>
          </a-col>
          <!-- 个人认证 -->
          <div v-if="model.authType=='0'">
            <a-col :span="12">
             <a-form-model-item label="姓名" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contact">
             <span class="ant-form-text">{{model.contact}}</span>
            </a-form-model-item>
          </a-col>
            <a-col :span="12">
             <a-form-model-item label="手机号" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPhone">
               <span class="ant-form-text">{{model.contactPhone}}</span>        
            </a-form-model-item>
            </a-col>
            <a-col :span="12">
            <a-form-model-item label="身份证号" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCardNo">
               <span class="ant-form-text">{{model.idCardNo}}</span>     
            </a-form-model-item>
          </a-col>  
          </div>
          <!-- 企业认证 -->
           <div v-else-if="model.authType=='1'">
            <a-col :span="12">
             <a-form-model-item label="联系人" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contact">
             <span class="ant-form-text">{{model.contact}}</span>
            </a-form-model-item>
          </a-col>
            <a-col :span="12">
             <a-form-model-item label="联系人手机号" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPhone">
               <span class="ant-form-text">{{model.contactPhone}}</span>        
            </a-form-model-item>
            </a-col> 
          </div>
          <a-col :span="12">
            <a-form-model-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
              <span class="ant-form-text">{{model.email}}</span>
            </a-form-model-item>
          </a-col> 
          <a-col :span="12">
            <a-form-model-item label="国家" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="country_dictText">
             <span class="ant-form-text">{{model.country_dictText}}</span>       
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="我的邀请码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orgAffCode">
              <span class="ant-form-text">{{model.orgAffCode}}</span>
               <a-button class="copyLink"  :data-clipboard-text="model.orgAffCode" id="tag-copy" style="margin-left: 15px;" @click="copyorgAffCode($event,model.orgAffCode)">复制</a-button>
            </a-form-model-item>
          </a-col> 
          <a-col :span="12">
            <a-form-model-item label="推荐人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="recommender">
              <span class="ant-form-text">{{model.recommender}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="邀请组织" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="recommender">
              <span class="ant-form-text">{{model.affCode_dictText}}</span>
            </a-form-model-item>
          </a-col>  
         <a-col :span="12">
            <a-form-model-item label="客户经理" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerManager">
              <span class="ant-form-text">{{model.customerManager}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
           <a-form-model-item label="运营平台" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <span class="ant-form-text">{{model.operationPlatform_dictText}}</span>  
            </a-form-model-item>
          </a-col>
        </a-row>
        <div v-if="model.authType=='1'">
        <a-divider />
        <a-row>
          <h3 class="title">企业信息</h3>
          <a-col :span="12">
          <a-form-model-item label="公司名称" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyName">
               <span class="ant-form-text">{{model.companyName}}</span>    
          </a-form-model-item>
             </a-col>
          <a-col :span="12">
           <a-form-model-item label="统一社会信用代码" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyCode">
              <span class="ant-form-text">{{model.companyCode}}</span>
            </a-form-model-item>
               </a-col>
            <a-col :span="12">
          <a-form-model-item label="法定代表人" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyLegalPerson">
              <span class="ant-form-text">{{model.companyLegalPerson}}</span>
          </a-form-model-item>
          </a-col>
          <a-col :span="12">
          <a-form-model-item label="法人身份证号" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCardNo">
              <span class="ant-form-text">{{model.idCardNo}}</span>
          </a-form-model-item>
          </a-col>
          <a-col :span="12">
          <a-form-model-item label="成立时间" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyRegDate">
              <span class="ant-form-text">{{model.companyRegDate}}</span>
          </a-form-model-item>
             </a-col>
           <a-col :span="12">
            <a-form-model-item label="公司注册地址" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyRegAddress">
              <span class="ant-form-text">{{model.companyRegAddress}}</span>
            </a-form-model-item>
            </a-col>
             <a-col :span="12">
            <a-form-model-item label="公司办公地址" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyAddress">
              <span class="ant-form-text">{{model.companyAddress}}</span>
            </a-form-model-item>
         </a-col>
        </a-row>
        </div>
          <a-divider />
        <a-row>
          <h3 class="title">证件信息</h3>
          <div v-if="model.authType=='1'">
          <a-col :span="14">    
            <a-form-model-item label="法人与合同签署人是否为同一人" :label-col="{ xs: { span: 24 }, sm: { span: 10 } }" :wrapper-col="{ xs: { span: 24 }, sm: { span: 10 } }">
               <!-- 否0    是 1 -->
               <span class="ant-form-text">{{model.izSamePerson=='0'?'否':'是'}}</span>  
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="营业执照" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyIdPhoto">
              <j-image-upload v-if="model.companyIdPhoto" :disabled="formDisabled" :isMultiple="false" v-model="model.companyIdPhoto" class="idCardImgBack"></j-image-upload>
            </a-form-model-item>
          </a-col>
          </div>
          <a-col :span="12">
            <a-form-model-item required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCardImg1">
              <span slot="label"> {{model.authType=='0'?'身份证':'身份证(法人)'}} </span>
              <div class="idCard" style="display: inline-flex">
                 <!--<j-image-upload  v-model="model.idCardImg1" class="uploadImages" style="width: 100%"></j-image-upload>
               <j-image-upload  v-model="model.idCardImg2" class="uploadImages" style="width: 100%; margin-left: 30px;"></j-image-upload>-->
                <j-image-upload v-if="model.idCardImg1" :disabled="formDisabled" v-model="model.idCardImg1" class="uploadImages" style="width: 100%"></j-image-upload>
               <j-image-upload v-if="model.idCardImg2" :disabled="formDisabled" v-model="model.idCardImg2" class="uploadImages" style="width: 100%; margin-left: 30px;"></j-image-upload> 
               
             </div>  
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-if="model.izSamePerson=='0'">
            <a-form-model-item label="身份证(合同签署人)" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCardImg3">
             <div class="idCard" style="display: inline-flex">
               <j-image-upload v-if="model.idCardImg3" :disabled="formDisabled" v-model="model.idCardImg3" class="uploadImages" style="width: 100%"></j-image-upload>
               <j-image-upload v-if="model.idCardImg4" :disabled="formDisabled" v-model="model.idCardImg4" class="uploadImages" style="width: 100%; margin-left: 30px;"></j-image-upload>
             </div>  
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="合同" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="internalBusinessContract">
              <j-image-upload v-if="model.internalBusinessContract" :disabled="formDisabled" v-model="model.internalBusinessContract" class="idCardImgBack"></j-image-upload>
            </a-form-model-item>
          </a-col>
           <a-col :span="12" v-if="model.authType=='1' && model.izSamePerson=='0'">
            <a-form-model-item label="授权书" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="authorizationLetter">
               <a-col :span="12">
                  <j-upload :disabled="formDisabled" v-model="model.authorizationLetter" text="上传附件" :multiple="false"></j-upload>
               </a-col>
            </a-form-model-item>
          </a-col>
        </a-row>
         <a-divider />
          <a-row>
             <a-col :span="12">
                <a-form-model-item label="认证最后提交人员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <span class="ant-form-text">{{model.authCommitUser}}</span>
            </a-form-model-item>
             </a-col>
             <a-col :span="12">
                <a-form-model-item label="认证申请时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <span class="ant-form-text">{{model.authCommitTime}}</span>
            </a-form-model-item>
             </a-col>
             <a-col :span="12">
                <a-form-model-item label="认证通过时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <span class="ant-form-text">{{model.authPassTime}}</span>
            </a-form-model-item>
             </a-col>
             <a-col :span="12">
                <a-form-model-item label="结算组织创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <span class="ant-form-text">{{model.createTime}} </span>
            </a-form-model-item>
             </a-col>
          </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import Clipboard from 'clipboard'
export default {
  name: 'BaseSettlemenDetailForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: {
        id: '',
        line: '1',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
      
      labelColIdCard: {
        xs: { span: 24 },
        sm: { span: 10 },
      },
      wrapperColIdCard: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      confirmLoading: false,
      validatorRules:{},
      data: [],
      url: {
         queryById: '/finance/baseSettlementOrg/queryById',  //通过id查询组织信息
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    add() {
      // this.edit(this.modelDefault);
      this.model = Object.assign({}, this.modelDefault)
      this.visible = true
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.getBaseSettlementOrgAuthInfo(record)
      this.visible = true
    },
      //根据id查询组织认证信息
    getBaseSettlementOrgAuthInfo(record){
       const that=this
      getAction(that.url.queryById, {id: record.id})
         .then(res=>{
          if(res.success){
            res.result.authType=res.result.authType?res.result.authType:'0'
            that.model=res.result
            that.model.technicalProption= res.result.technicalProption<1?(Number(res.result.technicalProption* 100).toFixed(2))+'%': res.result.technicalProption+'%';           
            // that.model.authType_dictText=res.result.authType
            that.model.packageFee=record.packageFee
            that.model.operateFee=record.operateFee
          }else{
            that.$message.warning(res.result)
          }
         })
    },
      //复制推荐码
    copyorgAffCode() {
      const clipboard = new Clipboard("#tag-copy")
      clipboard.on('success', e => {
       this.$message.success('复制成功！')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message.error('该浏览器不支持自动复制,请手动复制！')
        clipboard.destroy()
      })
    },
   

    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>
<style scoped>
.title {
  font-weight: bold;
  margin-left: 3%;
}
.operating {
  padding-right: 30px;
 
}
</style>